import React from 'react';
import { Tooltip } from './index';

export const TooltipDemo = () => {
  return (
    <div style={{ padding: '20px', maxWidth: '300px' }}>
      <h3>Tooltip 组件演示</h3>

      <div style={{ marginBottom: '20px' }}>
        <h4>1. 响应式模式 - 文本会被截断</h4>
        <Tooltip type="responsive" title="这是一段很长的文本内容，当文本被截断时会显示 tooltip">
          这是一段很长的文本内容，当文本被截断时会显示 tooltip
        </Tooltip>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <h4>2. 响应式模式 - 短文本不会被截断</h4>
        <Tooltip type="responsive" title="短文本的 tooltip">
          短文本
        </Tooltip>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <h4>3. 默认模式 - 总是显示 tooltip</h4>
        <Tooltip type="default" title="默认模式总是显示 tooltip">
          默认模式
        </Tooltip>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <h4>4. 没有 title - 不显示 tooltip</h4>
        <Tooltip type="responsive">没有 title 的文本</Tooltip>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <h4>5. 自定义样式</h4>
        <Tooltip
          type="responsive"
          title="自定义样式的文本"
          style={{
            backgroundColor: '#f0f0f0',
            padding: '8px',
            borderRadius: '4px',
            maxWidth: '200px',
          }}
        >
          这是一段很长的文本内容，用于测试自定义样式和截断检测
        </Tooltip>
      </div>
    </div>
  );
};
